<template>
	<view class="contenter">
		<view class="" style="padding: 3vw;">
			<u-search @search="search" @custom="search" placeholder="请输入检索内容" :showAction="true" actionText="搜索"
				bgColor='#fff'>
			</u-search>
		</view>
		<view class="border">
			<view class="" style="padding: 2vw 0 2vw 9vw;">
				{{card.orgName}}
			</view>
			<view class="" style="padding: 2vw 0;font-size: 6vw;text-align: center;">
				{{card.cardtype}}
			</view>
			<view style="border-top: 1px solid #fff;width: 72vw;padding-top: 2.5vw;margin: auto;display: flex;"></view>
			<view class="d-flex-3" style="margin: 0.4vh 0.4vh 0.4vh 4vh;">
				<view class="" v-if="card.getstate == 0"
					style="width: 16vw;height: 4vh;line-height: 4vh;background: #fff;border-radius: 4px;color: #3297FF;text-align: center;">
					未取卡
				</view>
				<view class="" v-if="card.getstate == 1"
					style="width: 16vw;height: 4vh;line-height: 4vh;background: #fff;border-radius: 4px;color: #3297FF;text-align: center;">
					已取
				</view>
				<view class="d-flex-col" style="font-size: 13px;margin-left: 2vw;">
					<view class="">
						购买时间：{{card.buytime}}
					</view>
					<view class="" v-if="card.gettime != null">
						取卡时间：{{card.gettime}}
					</view>
					<view class="" v-else>
						取卡时间：--
					</view>
				</view>
			</view>
		</view>
		<view class="xfjl">
			消费记录
		</view>
		<scroll-view scroll-y style="width: 94vw;height: 62vh;background: #fff;border-radius: 4px;margin-left: 3%;">
			<view class="item" v-for="(item,index) in consumeInfo" :key="item" >
				<view class="item_left">
					<view class="iconfont ">
						<u-icon name="coupon-fill" color="#2979ff" size="30" style="margin-left: 1.3vw;"></u-icon>
					</view>
				</view>
				<view class="item_center">
					<view class="" style="font-size: 30rpx;font-weight: 600;">
						商品：{{item.cardtype}}
					</view>
					<view class="" style="margin-top: 20rpx;">
						类型：{{item.chargetype}}
					</view>
					<view class="" style="margin-top: 20rpx;color: #A0A0A0;">
						{{item.intime}}
					</view>
				</view>
				<view class="item_right">
					{{item.timetype}}
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import {
		usercardDetail,
	} from '@/common/api';
	export default {
		data() {
			return {
				val:'',
				consumeInfo:[],
				card:{}
			};
			
		},
		onLoad(e) {
		},
		methods: {
			getList() {
				if (!this.val) {
					uni.showToast({
						title: '请输入卡号',
						icon: 'none'
					})
					return
				}
				usercardDetail({
						venue_id: uni.getStorageSync('venue_id'),
						cardType: '',
						cardNo: this.val,
					})
					.then(res => {
						console.log(res, '222')
						this.card = res.card
						this.consumeInfo = res.consumeInfo.data
					})
					
			},
			// 搜索字
			search(val) {
				console.log(val, '11')
				this.val = val
				this.getList()
			},
		}
	};
</script>

<style lang="scss" scoped>
	.contenter {
		width: 100vw;
		min-height: 100vh;
		background-color: #f1f1f1;
	}

	.border {
		background-image: url('../../static/qita/nianka.png');
		background-size: 100% 100%;
		width: 90vw;
		height: 360rpx;
		margin-left: 5vw;
		margin-top: 2vw;
		border-radius: 4vw;
		color: #fff;

	}

	.xfjl {
		text-align: center;
		position: relative;
		overflow: hidden;
		color: rgb(160, 160, 160);
		padding: 3.5vw;
	}

	.xfjl:before {
		display: inline-block;
		content: "";
		width: 30vw;
		height: 1px;
		background-color: #A0A0A0;
		position: absolute;
		right: 2vw;
		top: 6vw;
	}

	.xfjl:after {
		display: inline-block;
		content: "";
		width: 30vw;
		height: 1px;
		background-color: #A0A0A0;
		position: absolute;
		left: 2vw;
		top: 6vw;
	}

	.item {
		width: 94vw;
		height: 14vh;
		display: flex;
		align-items: center;
		border-bottom: 1px solid #f3f3f3;
		margin-left: 3vw;
	}

	.item_left {
		width: 10vw;
		height: 20vw;
		font-size: 8vw;
		margin: 20px;
		color: rgb(6, 139, 255);

		.iconfont {
			width: 10vw;
			height: 10vw;
			border: 1rpx solid rgb(6, 139, 255);
			border-radius: 50%;
			display: flex;
			ustify-content: center;
			align-items: center;
		}
	}

	.item_center {
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
		// margin-top: -30rpx;
	}

	.item_right {
		display: flex;
		width: 20vw;
		text-align: center;
		align-items: flex-start;
		// margin-top: -15vw;
		// margin-left: 10vw;
	}
</style>